import React, { Component, useState, useEffect } from "react";
import { useChannel } from "@/hooks/useChannel";
import { useNavigate } from "react-router-dom";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { request } from "@/utils";
import {
  Button,
  Form,
  Input,
  Select,
  Space,
  Pagination,
  Radio,
  Upload,
  DatePicker,
  Table,
  Card,
  Tag,
} from "antd";
import "./index.scss";
import dayjs from "dayjs";
const { RangePicker } = DatePicker;
const { Option } = Select;

export default function Screen() {
  let nav = useNavigate();
  let changeRadio = (e) => {
    setRadio(e.target.value);
  };

  const { itemList } = useChannel();

  const [radio, setRadio] = useState(1);
  const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
  };
  let jumpPublish = (id) => {
  
    nav(`/publish?id=${id}`);
  };
  let status = {
    1: <Tag color="warning">待审核</Tag>,
    2: <Tag color="success">审核通过</Tag>,
  };
  const [reqData, setReqData] = useState({
    status: "",
    channel_id: "",
    begin_pubdate: "",
    end_pubdata: "",
    page: 1,
    per_page: 3,
  });
  let PaChange = (page) => {
    setReqData(() => ({ ...reqData, page }));
  };
  let dateChange = (e) => {
    if (e) {
      setReqData({
        ...reqData,
        begin_pubdate: dayjs(e[0]).format("YYYY-MM-DD") || "",
        end_pubdata: dayjs(e[1]).format("YYYY-MM-DD") || "",
      });
    } else {
      setReqData({
        ...reqData,
        begin_pubdate: "",
        end_pubdata: "",
      });
    }
  };
  let [dataSource, setDataSource] = useState();
  let columns = [
    {
      title: "封面",
      dataIndex: "cover",
      key: "cover",
      render: (item) => {
        return (
          <>
            {item.images.map((item, index) => (
              <img
                key={index}
                src={item}
                style={{ width: "80px", height: "80px", marginLeft: "5px" }}
              />
            ))}
          </>
        );
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      //1.三元运算符
      //2.枚举方式
      render: (data) => status[data],
    },
    {
      title: "发布时间",
      dataIndex: "pubdate",
      key: "pubdate",
    },
    {
      title: "阅读数",
      dataIndex: "read_count",
      key: "read_count",
    },
    {
      title: "评论数",
      dataIndex: "comment_count",
      key: "comment_count",
    },
    {
      title: "点赞数",
      dataIndex: "like_count",
      key: "like_count",
    },
    {
      title: "操作",
      render: (item) => {
        let id = item.id;

        return (
          <>
            <Button
              onClick={() => jumpPublish(id)}
              icon={<EditOutlined />}
              style={{ background: "blue" }}
            ></Button>
            <Button
              onClick={() => delChange(id)}
              icon={<DeleteOutlined />}
              style={{ marginLeft: "5px", background: "red" }}
            ></Button>
          </>
        );
      },
    },
  ];
  const [list, setList] = useState();
  let delChange = (id) => {
    request({ url: `/mp/articles/${id}`, method: "delete" }).then((res) => {
      if (res.message === "OK") {
        getList();
      }
    });
  };
  let getList = (data = {}) => {
    request({ url: "/mp/articles", method: "get", params: data }).then(
      (res) => {
        setList(res.data);
        setDataSource(res.data.results);
      }
    );
  };
  useEffect(() => {
    getList({ ...reqData });
  }, [reqData]);
  const [form] = Form.useForm();
  let onFinish = (e) => {
    let sendMsg = {
      ...reqData,
      ...e,
    };

    getList(sendMsg);
  };
  const tailLayout = {
    wrapperCol: { offset: 2, span: 22 },
  };
  let optionsWithDisabled = [
    { label: "全部", value: "" },
    { label: "草稿", value: 0 },
    { label: "审核通过", value: 2 },
  ];

  return (
    <>
      <div className="article">
        <Form
          {...layout}
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          style={{ maxWidth: 600 }}
          initialValues={{ type: 1 }}
        >
          <Form.Item label="状态" name="status">
            <Radio.Group options={optionsWithDisabled} onChange={changeRadio} />
          </Form.Item>
          <Form.Item
            name="channel_id"
            label="频道"
            wrapperCol={{ offset: 0, span: 6 }}
          >
            <Select placeholder="请选择" allowClear>
              {itemList.map((item) => (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="日期" rules={[]}>
            <RangePicker
              picker="date"
              format={"YYYY-MM-DD"}
              value-format="YYYY-MM-DD"
              onChange={dateChange}
            />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Space>
              <Button type="primary" htmlType="submit">
                筛选
              </Button>
            </Space>
          </Form.Item>
        </Form>
        <h3>根据帅选条件查询到count条结果：{list?.total_count}</h3>
        <Table dataSource={dataSource} columns={columns} />;
        <Pagination
          pageSize={3}
          total={list?.total_count}
          onChange={PaChange}
        />
      </div>
    </>
  );
}
